/*
 * @Author: xiaosihan 
 * @Date: 2023-08-19 13:39:12 
 * @Last Modified by: xiehangyun
 * @Last Modified time: 2025-04-17 19:23:16
 */




import { useEffect, useRef, useState } from "react";
import styles from "./myPhoto.module.less";

import { throttle } from "lodash";


import { MyPhotoData } from "#/type";
import utils from "@/utils/utils";
import { Spin } from "antd";
import { autorun, toJS } from "mobx";
import upload_iconPNG from "./img/upload_icon.png";
import ImgItem from "./ImgItem/ImgItem";
import myPhotoStore from "./myPhotoStore";

interface Iprops {
  onClick?: (url: string, name: string) => void;
}

//用户上传的图片
export default function MyPhoto(props: Iprops) {

  const imglist = useRef<HTMLDivElement | null>(null);
  const [arrangeType, setArrangeType] = useState(myPhotoStore.arrangeType);
  const [hasNext, setHasNext] = useState(true);

  const [uploadding, setUploadding] = useState(myPhotoStore.uploadding);
  const [imageList, setImageList] = useState<Array<MyPhotoData>>([]);

  useEffect(() => autorun(() => {
    setArrangeType(myPhotoStore.arrangeType);
    requestAnimationFrame(async () => {
      await new Promise(resolve => requestAnimationFrame(resolve));
      if (!myPhotoStore.loading && myPhotoStore.hasNext) {
        const isBottom = isScrollBottom();
        if (isBottom) {
          myPhotoStore.getImageList();
        }
      }
    });
  }), []);
  useEffect(() => autorun(() => {
    setHasNext(myPhotoStore.hasNext);
  }), []);
  useEffect(() => autorun(() => {
    setUploadding(myPhotoStore.uploadding);
  }), []);
  useEffect(() => autorun(() => {
    setImageList(toJS(myPhotoStore.imageList));
    requestAnimationFrame(async () => {
      await new Promise(resolve => requestAnimationFrame(resolve));
      if (!myPhotoStore.loading && myPhotoStore.hasNext) {
        const isBottom = isScrollBottom();
        if (isBottom) {
          myPhotoStore.getImageList();
        }
      }
    });
  }), []);

  // 判断滚动到底了没有
  const isScrollBottom = () => {
    if (imglist.current) {
      return (imglist.current.scrollHeight - 100) < (imglist.current.scrollTop + imglist.current.clientHeight);
    }
    return false;
  }

  // 移动端上传的地址
  // https://api-test.uniqtee.com/mobile_upload.html?mobile_uploadid=506

  return (
    <div className={styles.myPhoto} >

      <div
        className={styles.title}
      >上传图片</div>

      <div
        className={styles.upload}
        onClick={() => {
            myPhotoStore.upload();
        }}
      >
        <img
          className={styles.upload_icon}
          src={upload_iconPNG}
          alt=""
        />
        上传
        &nbsp;
        {uploadding && <Spin size="small" />}

      </div>

      {/* 图片列表 */}
      <div
        ref={imglist}
        className={styles.imglist}
        onScroll={throttle(() => {
          if (!myPhotoStore.loading && myPhotoStore.hasNext) {
            const isBottom = isScrollBottom();
            if (isBottom) {
              myPhotoStore.getImageList();
            }
          }
        })}
      >
        {
          imageList.map((img, i) => {
            return (
              <ImgItem
                id={img.id}
                key={img.picPath}
                src={utils.ossSuffix(img.picPath, arrangeType === 2 ? 68 : 146)}
                size={arrangeType === 2 ? "small" : "large"}
                onClick={props.onClick}
                onDelete={() => {
                  myPhotoStore.delImg(img.id);
                }}
              />
            );
          })
        }
        {!hasNext && <div className={styles.no_more} >--没有更多了--</div>}
      </div>
    </div >
  );

}
